<template>
  <el-dialog title="恢复分配" :close-on-click-modal="false" :visible.sync="visible" top="7vh" width="80vw" @close="close()">
    <div>
      <el-row>
        <el-col :span="8">
          <div class="user__main boxsty filter-container">
            <div class="mb10">
              <el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input>
            </div>
            <div class="avue-crud" style="height:calc(100vh - 470px);">
              <!-- <el-tree :data="deptData" ref="tree" node-key="id" :props="defaultProps"
                        :default-expand-all="true" :filter-node-method="filterNode"
                        @current-change="handleCurrentChange">
              </el-tree> -->
              <div>
                <p v-for="(item,index) in jjTableData" style="cursor: pointer;" @click="changeJjx(item)"><span>{{index+1}}.</span>{{item.jjxMc}}</p>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="16" style="padding:0px 20px;" >
          <el-card class="mb10">
            <div slot="header">
              <span>基本信息</span>
            </div>
            <div>
              <el-row class="mb10">
                <el-col :span="24"><span>当前部门：{{deptName }}</span></el-col>
                <!-- <el-col :span="12">
                  <span>发放审批：
                    <span v-if="deptJJData.ffSp == '审批通过'" style="color:green;">{{ deptJJData.ffSp }}</span>
                    <span v-else style="color:red;">{{ deptJJData.ffSp }}</span>
                  </span>
                </el-col> -->
              </el-row>
            </div>
          </el-card>
          <!-- <el-card class="mb10">
            <div slot="header">
              <span>奖金项详情</span>
            </div>
            <div>
              <el-table :data="jjTableData" class="avue-crud" border  v-loading="jjTableLoading" @selection-change="handleSelectionChange">
                <el-table-column type="selection" align="center" width="55"></el-table-column>
                <el-table-column prop="jjxFl" align="center" label="奖金项分类"></el-table-column>
                <el-table-column prop="jjxMc" align="center" label="奖金项名称"></el-table-column>
                <el-table-column align="center" label="奖金总额(元)">
                  <template slot-scope="scope">
                    {{ $formatNum(scope.row.jjxZe) }}
                  </template>
                </el-table-column>
                <el-table-column align="center" label="奖金余额(元)">
                  <template slot-scope="scope">
                    {{ $formatNum(scope.row.jjxYe) }}
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-card> -->
          <el-card>
            <div slot="header">
              <span>部门分配详情</span>
            </div>
            <div>
              <el-table v-if="deptTableData.dept" :data="deptTableData.dept" class="avue-crud" ref="deptTable" border v-loading="deptTableLoading">
                <el-table-column type="selection" align="center" width="55"></el-table-column>
                <el-table-column prop="deptName" align="center" label="分配部门"></el-table-column>
                <el-table-column header-align="center" >
                  <template slot="header" slot-scope="scope">
                    {{deptTableData.jjxMc}}
                  </template>
                  <el-table-column align="center" label="奖金总额(元)">
                    <template slot-scope="scope">
                      {{scope.row.jjxZe }}
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="奖金余额(元)">
                    <template slot-scope="scope">
                      {{scope.row.jjxYe }}
                    </template>
                  </el-table-column>
                </el-table-column>
              </el-table>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="resetSubmit()" >恢复</el-button>
            
      <el-button type="primary" plain @click="close()">取消</el-button>
            <!-- :disabled="canNotSubmit" -->
    </span>
  </el-dialog>
</template>

<script>
/*!
 * 绩效考核-奖金分配-恢复分配
 *
 * @author zmk
 * @date 2021-09-10 14:11:35
 */

import {selZjfpxx, saveRecoveryNew, getJJDeptList, getJJItems} from '@/api/jiangjin/jiangjinfpjjfpdjb';

export default {
  components: {
  },
  data() {
    return {
      visible: false,
      fpId: '',
      filterText: '',
      canNotSubmit: true,
      multipleSelection: [],
      defaultProps: {
        children: 'children',
        label: 'jjDeptName'
      },
      deptData: [], // 下属部门列表
      deptJJData: {}, // 部门奖金数据
      jjTableData: [], // 奖金项列表数据
      deptTableData: {}, // 部分奖金项列表数据
      jjTableLoading: false,
      deptTableLoading: false,
      deptName:""
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  methods: {

    // 初始化
    init(fpId,deptName) {
      this.deptName=deptName
      this.fpId = fpId
      this.visible = true
      this.tableLoading = true
      selZjfpxx(fpId).then(res => {
        this.deptData = res.data.data
        this.fngetJJItems()
        // this.$nextTick(() => {
        //   if (this.deptData.length > 0) {
        //     this.$refs.tree.setCurrentKey(this.deptData[0].id)
        //     this.handleCurrentChange(this.deptData[0])
        //   }
        // })
        this.tableLoading = false
      })
    },

    // el-tree节点过滤
    filterNode(value, data) {
      if (!value) return true;
      return data.jjDeptName.indexOf(value) !== -1;
    },

    // 奖金项列表选中
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    // 部门tree节点改变事件，显示部门奖金分配情况
    handleCurrentChange(nodeData) {
      this.canNotSubmit = true
      // 获取部门奖金详情
      this.deptJJData = nodeData
      // 获取奖金项列表数据
      this.jjTableLoading = true
      getJJItems(this.fpId).then(response => {
        this.jjTableData = response.data.data
        this.jjTableLoading = false
        // 获取部门奖金分配列表数据
        this.deptTableLoading = true
        // getJJDeptList(this.fpId).then(response => {
        //   this.deptTableData = response.data.data
        //   console.log(JSON.stringify(this.deptTableData))
        //   this.deptTableLoading = false
        // })
      })

      if (nodeData.ffSp === '审批通过') {
        this.canNotSubmit = false // 审批通过才允许恢复
      }
    },
    changeJjx(item){
      this.jjTableData.forEach(it=>{
        
        if(item.jjxId==it.jjxId){
          this.deptTableData=it
        }
      })
    },
    fngetJJItems(){
      getJJItems(this.fpId).then(response => {
         console.log(JSON.stringify(response.data.data))
        if(response.data.data.length>0){
         
          this.jjTableData = response.data.data;
          this.deptTableData=this.jjTableData[0]
        }else{
         
          this.deptTableData={
            dept:[]
          }
        }
        
        // 获取部门奖金分配列表数据
       // this.deptTableLoading = true
        // getJJDeptList(this.fpId).then(response => {
        //   this.deptTableData = response.data.data
        //   console.log(JSON.stringify(this.deptTableData))
        //   this.deptTableLoading = false
        // })
      })
    },
    // 根据奖金项id从奖金项数组中找到并返回奖金项总额
    getjjxZe(jjxId, jjItems) {
      for (const index in jjItems) {
        if (jjItems[index].jjxId === jjxId) {
          return jjItems[index].jjxZe
        }
      }
      return 0
    },
    // 根据奖金项id从奖金项数组中找到并返回奖金项余额
    getjjxYe(jjxId, jjItems) {
      for (const index in jjItems) {
        if (jjItems[index].jjxId === jjxId) {
          return jjItems[index].jjxYe
        }
      }
      return 0
    },

    // 分配恢复提交
    resetSubmit() {
      var data=this.$refs.deptTable.selection;
      if (data.length === 0) {
        this.$notify.closeAll()
        this.$notify.error('请选择要恢复的部门')
        return
      }
      // 恢复分配-某一级部门的分配id+要恢复分配的奖金项id列表
      let childIds = data.map((item) => {
        return item.childId
      })
      saveRecoveryNew({
        fpId: this.fpId,
        childIdList: childIds,
        jjxId:this.deptTableData.jjxId
      }).then(data => {
        this.$notify.closeAll();
        this.$notify.success('恢复成功')
        this.close()
        this.$emit('refreshDataList')
      }).catch(() => {
      })

    },
    close(){
      this.visible = false;
      this.deptTableData={
            dept:[]
          }
      this.jjTableData=[]    
    },

  }
}
</script>
<style scoped>

</style>
